<template id="formInput">
	<div>
		<el-upload v-if="type === 'FILL_IMAGE'" action="#" :http-request="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
			<img v-if="values" :src="values" class="avatar2">
			<div v-else class="avatar1 dis disAl disJuC">
				<i class="el-icon-plus avatar-uploader-icon"></i>
			</div>
		</el-upload>
		<el-input v-if="type === 'MULTI_LINE_TEXT'" v-model="values" type="textarea" style="min-width:735px;margin-left:20px"
			maxlength="100000" :rows="5" :placeholder="'请输入'+title" @input="shuInput" />
		<el-input v-if="type == 'TEXT'" v-model="values" style="width: 200px;" 
			size="small" :placeholder="'请输入'+title" @input="shuInput" />
		<el-checkbox v-if="type == 'CHECK_BOX'" v-model="values" true-label="true" false-label="false" @change="checkboxClick"></el-checkbox>
		<el-cascader v-if="type == 'DISTRICT'" v-model="values" style="width: 200px;" :options="cascaderList" :props="optionProps"
			@change="handleChange" />
		<el-date-picker v-if="type == 'SIGN_DATE'" v-model="values" style="width: 200px;" size="small" type="date" 
			:placeholder="'请选择'+title" @change="bindDateChange" value-format="yyyy-MM-dd"/>
	</div>
</template>

<script>
	import cascaderJSON from '@/api/cascaderList.json'
	export default {
		name: 'formInput',
		props: {
			component: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: ''
			},
			index: {
				type: Number,
				default: 0
			},
			value: {
				type: String,
				default: ''
			},

		},
		data() {
			return {
				// 判断是否还在继续输入
				timer: null,
				cascaderList: cascaderJSON,
				optionProps: {
					value: "value",
					label: "value",
					children: "children"
				},
				values: this.value
			};
		},
		methods: {
			shuInput(e) {
				console.log(e)
				if (this.timer !== null) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.$emit('indexInput', e, this.index, this.component)
				}, 500)
			},
			checkboxClick() {
				var value = this.values ? this.values : false
				this.$emit('indexInput', value, this.index, this.component)
			},
			// 获取日期
			bindDateChange(e) {
				console.log(e)
				this.$emit('indexInput', e, this.index, this.component)
			},
			// 获取省市区
			handleChange(e) {
				var provinceName = e[0] + '-' + e[1] + '-' + e[2];
				this.$emit('indexInput', provinceName, this.index, this.component)
			},
			handleAvatarSuccess(file) {
				var that = this
				let mf = new FormData()
				mf.append('file', file.file)
				uploadimg(mf).then(response => {
					that.$emit('indexInput', response.data, that.index, that.component)
				})
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
				this.outputType = file.type === 'image/jpeg' ? 'jpeg' : file.type === 'image/png' ? 'png' : ''
				const isLt2M = file.size / 1024 / 1024 < 5
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 5MB!')
				}
				return isJPG && isLt2M
			}
		}
	};
</script>

<style lang="scss" scoped>
	.avatar1{
		border: 1px dashed #d9d9d9;
		width: 80px;
		height: 80px;
	}
	.avatar2{
		width: 80px;
		height: 80px;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	}
</style>